<template>
  <div class="temabuy">
    <h3>团购管理</h3>
    <div class="teamInner">
      <div class="fromInput">
        <p>
          搜索：
          <input type="text" v-model="searchValue" placeholder="请输入楼盘名称" @keyup.enter="search" />
        </p>
        <p>
          选择:
          <el-select v-model="value" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </p>
        <el-button type="primary" @click="searchState">查询</el-button>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column label="图片" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.img }}</span>
            </template>
          </el-table-column>
          <el-table-column label="楼盘名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.buildname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="楼盘地址" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发起人" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="起始时间" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.state }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      tableData: [],
      pageIndex: 1,
      pageSize: 5,
      currentPage4: 1,
      total: null,
      options: [
        {
          value: "已开团",
          label: "已开团"
        },
        {
          value: "未开团",
          label: "未开团"
        }
      ],
      value: ""
    };
  },
  methods: {
    //搜索
    search() {
      this.$http
        .post("/api/searchTeam", {
          keyword: this.searchValue
        })
        .then(res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data;
            this.$message.success(res.data.message);
          }
        });
    },
    //状态筛选
    searchState() {
      this.$http
        .post("/api/selectState", {
          state: this.value
        })
        .then(res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data;
            this.$message.success(res.data.message);
          }
        });
    },
    //删除数据
    handleDelete(index, row) {
      this.$http
        .post("/api/delete", {
          id: row.id
        })
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getList(this.pageIndex, this.pageSize);
          }
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList(this.pageIndex, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList(this.pageIndex, this.pageSize);
    },
    //获取数据
    getList(pageIndex, pageSize) {
      this.$http
        .post("/api/getList", {
          pageIndex: pageIndex,
          pageSize: pageSize
        })
        .then(res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data;
            this.total = res.data.total;
          }
        });
    }
  },
  created() {
    this.getList(this.pageIndex, this.pageSize);
  }
};
</script>

<style scoped lang='scss'>
.temabuy {
  width: 100%;
  height: 100%;
  padding: 5px;
  .teamInner {
    width: 100%;
    min-height: 500px;
    padding: 5px;
    .fromInput {
      width: 100%;
      height: 100px;
      background: white;
      p{
        padding-left: 10px;
        input{
          width: 250px;
          height: 35px;
          text-indent: 10px;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
.table {
  margin: 15px 0;
}
.fromInput {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>